import { Descriptions, Drawer, message, Rate, Spin, Tooltip } from "antd";
import { FC, useEffect, useState } from "react";
import AddReservation from "./addReservation";
import AppointedStudents from "./appointedStudents";
import SortCourse from "./sortCourse";
import styles from "../styles.less";
import dayjs from "dayjs";
import Https from "@/utils/Https";
import { QuestionCircleOutlined } from "@ant-design/icons";
import { weekNameList } from "../../interface";
const WeekReservation: FC<any> = (props) => {
  const {
    venueObj,
    defaultWeekValue,
    roomInfo,
    defaultTime,
    sortReload,
    hasFull,
    onReload,
  } = props;
  const [courseInfo, setCourseInfo] = useState<any>({});
  const [open, setOpen] = useState("");
  const [loading, setLoading] = useState(false);
  const [weekTimeList, setWeekTimeList] = useState([]);
  const [defaultDate, setDefaultDate] = useState("");
  const [title, setTitle] = useState("");
  //获取X轴数据
  const getXaxle = async (id, defaultWeekValue) => {
    let params = {
      weekType: "2",
      pramDate: dayjs(defaultWeekValue).format("YYYY-MM-DD"),
      venueId: id,
    };
    setLoading(true);
    let res: any = await Https.post("/course/sched/timeWeek", params, true);
    if (res.code == 200) {
      let objList = [{ date: "" }];
      if (res.data.length > 0) {
        res.data.map((item) => {
          objList.push({ ...item });
        });
        setWeekTimeList(objList);
      }
    } else {
      setWeekTimeList([]);
      message.error(res.msg);
    }
    setLoading(false);
  };
  useEffect(() => {
    if (venueObj.id && defaultWeekValue) {
      getXaxle(venueObj.id, defaultWeekValue);
    }
  }, [venueObj, defaultWeekValue]);
  return (
    <Spin spinning={loading}>
      {weekTimeList && weekTimeList.length > 0 && (
        <>
          <SortCourse
            weekTimeList={weekTimeList}
            venueObj={venueObj}
            roomInfo={roomInfo}
            defaultTime={defaultTime}
            sortReload={sortReload}
            hasFull={hasFull}
            addWork={(type, e, c) => {
              if (type == "add") {
                setDefaultDate(e.date);
                setCourseInfo(c);
                setOpen("add");
              } else {
                setTitle(
                  `预约详情(${e.date} 周${
                    weekNameList[
                      dayjs(e.date).day() == 0 ? 7 : dayjs(e.date).day()
                    ]
                  })`
                );
                setCourseInfo(c);
                setOpen("details");
              }
            }}
          />

          <AddReservation
            open={open == "add"}
            courseInfo={courseInfo}
            defaultDate={defaultDate}
            onSuccess={() => {
              setOpen("");
              onReload();
            }}
            onClose={() => {
              setOpen("");
            }}
          />
          <Drawer
            open={open == "details"}
            title={title}
            footer={null}
            width={"70%"}
            destroyOnClose={true}
            maskClosable={true}
            className={styles.AddReservationBox}
            onClose={() => {
              setOpen("");
            }}
          >
            <Descriptions column={2} title="" bordered>
              <Descriptions.Item label="课程名称">
                {courseInfo.courseName}
              </Descriptions.Item>
              <Descriptions.Item label="课程类型">
                {courseInfo.courseType == 1
                  ? "私教课"
                  : courseInfo.courseType == 2
                  ? "团课"
                  : "班课"}
              </Descriptions.Item>
              <Descriptions.Item label="课程名称">
                {dayjs(courseInfo.startTimeSlot).format("HH:mm")}-
                {dayjs(courseInfo.endTimeSlot).format("HH:mm")}
              </Descriptions.Item>
              <Descriptions.Item label="授课老师">
                {courseInfo.courseCoachName}
              </Descriptions.Item>
              <Descriptions.Item label="课程难度">
                <Rate value={courseInfo.courseDifficulty} disabled></Rate>
              </Descriptions.Item>
              <Descriptions.Item label="状态">
                {courseInfo.isExpired == "1"
                  ? "已过期"
                  : courseInfo.isFull == "1"
                  ? "已满员"
                  : "可预约"}
              </Descriptions.Item>
              <Descriptions.Item label="教室">
                {courseInfo.classRoomName}
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <div>
                    预约状态
                    <Tooltip
                      title={"0 | 0 | 0: 签到人数 | 预约人数 | 容纳人数"}
                    >
                      <QuestionCircleOutlined style={{ marginLeft: "10px" }} />
                    </Tooltip>
                  </div>
                }
              >
                {courseInfo.signCount} | {courseInfo.studentCount} |{" "}
                {courseInfo.peopleNumMax}
              </Descriptions.Item>
            </Descriptions>
            <AppointedStudents
              onSuccess={() => {
                onReload();
              }}
              cardInfo={courseInfo}
            />
          </Drawer>
        </>
      )}
    </Spin>
  );
};
export default WeekReservation;
